<template>
    <div style="margin: 10px">
      <div style="display: flex;width:100%">
        <div style="width: 30%;margin-right: 10px;display: flex;flex-flow: column;height: 800px">
          <el-card style="margin-bottom: 10px;height: 50%">
            <h2 slot="header">指标数统计</h2>
            <div style="display: flex;margin-bottom: 20px;width: 100%">
              <div style="width:50%; padding: 20px; margin-left: 50px ">
                <h3>指标数</h3>
                <h1 style="color: #5470c6;font-size: 100px">{{evaluationNum}}</h1>
              </div>
              <div style="width: 50%; padding: 20px; margin-left: 50px ">
                <h3>指标类型</h3>
                <h1 style="color: #91cc75;font-size: 100px">{{evaluationType}}</h1>
              </div>
            </div>
          </el-card>
          <el-card style="margin-bottom: 10px;height: 50%">
            <h2 slot="header">指标数曲线</h2>
            <div id="lineChart" style="width: 100%;height: 200px"></div>
          </el-card>
          <el-card style="height: 50%">
            <h2 slot="header">指标类型</h2>
<!--            <div style="display: flex;flex-flow: column">-->
<!--              <div>-->
<!--                <div>类型一</div>-->
<!--                <el-progress :percentage="50" :color="color[0]"></el-progress>-->
<!--              </div>-->
<!--              <div>-->
<!--                <div>类型二</div>-->
<!--                <el-progress :percentage="50" :color="color[1]"></el-progress>-->
<!--              </div>-->
<!--              <div>-->
<!--                <div>类型三</div>-->
<!--                <el-progress :percentage="50" :color="color[2]"></el-progress>-->
<!--              </div>-->
<!--&lt;!&ndash;              <div id="echartsBar" style="width: 100%;height: 200px"></div>&ndash;&gt;-->
<!--            </div>-->
            <div id="AnnualPie" style="width: 100%;height: 170px;"></div>
          </el-card>
        </div>
        <div style="width: 70%">
          <el-card style=";height: 800px">
            <h2 slot="header">指标数据详情</h2>
            <div style="display: flex;margin-bottom: 20px">
              <div style="white-space: nowrap">类型：
                <el-select v-model="typeSelect"  placeholder="请选择" size="mini">
                  <el-option v-for="item in typeSelectData" :key="item"
                             :label="item.name" :value="item.value"></el-option>
                </el-select>
              </div>
              <div style="white-space: nowrap;margin-left: 20px">
                型号：
                <el-select v-model="modelSelect"  placeholder="请选择" size="mini">
                  <el-option v-for="item in modelSelectData" :key="item"
                             :label="item.name" :value="item.value"></el-option>
                </el-select>
              </div>
              <div style="white-space: nowrap;margin-left: 20px">编号：
                <el-select v-model="serialSelect" placeholder="请选择" size="mini">
                  <el-option v-for="item in serialSelectData" :key="item"
                             :label="item.name" :value="item.value"></el-option>
                </el-select>
              </div>
              <div style="margin-left: 20px">
                <el-button class="el-icon-search" size="mini" type="primary">搜索</el-button>
              </div>
            </div>
            <div style="width: 100%">
              <el-table :data="dataList" stripe
                        height="600"
                        style="width: 100%">
                <el-table-column label="名称" prop="name">
                </el-table-column>
                <el-table-column label="类型" prop="type">
                </el-table-column>
                <el-table-column label="阈值" prop="thresholdValue">
                </el-table-column>
                <el-table-column label="时间" prop="time">
                </el-table-column>
                <el-table-column label="单位" prop="unit">
                </el-table-column>
                <el-table-column label="操作" width="200">
                  <template slot-scope="slot">
                    <div>
                      <el-button size="mini" type="danger">删除</el-button>
                      <el-button size="mini" type="primary">修改</el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div style="margin-top: 10px;">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage4"
                  :page-sizes="[10, 20, 50, 100]"
                  :page-size="20"
                  style="display: inline-block"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="400">
                </el-pagination>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
</template>

<script>
  import AnnualPie from '../Charts/AnnualPie';
  export default {
    name: 'EvaluationIndexCard',
    components:{
      AnnualPie
    },
    data(){
      return{
        evaluationNum:20,
        evaluationType:80,
        modelSelect:'',
        modelSelectData:[{name:'生成模型',value:1},{name:'预测模型',value:2},{name:'随机数模型',value:3},{name:'随机森林模型',value:4}],
        typeSelect:'',
        typeSelectData:[{name:'故障预警',value:1},],
        serialSelect:'',
        serialSelectData:[{name:'001',value:1},{name:'002',value:2},{name:'003',value:3},],
        dataList:[{
          name:'故障预警',type:'预警方法',thresholdValue:'30.61',time:'2020-11-07',unit:'无',
        },{
          name:'故障预警',type:'处理方法',thresholdValue:'102.21',time:'2020-11-08',unit:'无',
        },{
          name:'故障预警',type:' 处理方法',thresholdValue:'98.3',time:'2020-11-09',unit:'无',
        },{
          name:'故障预警',type:'预警方法',thresholdValue:'45.6',time:'2020-11-10',unit:'无',
        },{
          name:'故障预警',type:'预警方法',thresholdValue:'45.6',time:'2020-11-11',unit:'无',
        },{
          name:'故障预警',type:'预警方法',thresholdValue:'66.7',time:'2020-11-12',unit:'无',
        },{
          name:'故障预警',type:'预警方法',thresholdValue:'29.3',time:'2020-11-13',unit:'无',
        },{
          name:'故障预警',type:'处理方法',thresholdValue:'108.1',time:'2020-11-14',unit:'无',
        },],
        color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
      }
   },
    mounted () {
        this.drawLineChart()
        this.drawAnnualPie()
    },
    methods:{
      drawLineChart(){
        let op1 = {
          xAxis: {
            type: 'category',
            data: ['18:53', '18:54', '18:55', '18:56', '18:57', '18:58', '18:59'],
            name: "时", //坐标名字
            nameLocation: "end",//坐标位置，支持start,end，middle
            nameTextStyle: {//字体样
              padding: -10 //距离坐标位置的距离
            }
          },
          yAxis: {
            type: 'value',
            name: "指标数", //坐标名字
            nameLocation: "end",//坐标位置，支持start,end，middle
            nameTextStyle: {//字体样式


              padding: -10 //距离坐标位置的距离

            }
          },
          series: [{
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }]
        };
        let myChart = this.$echarts.init(document.getElementById('lineChart'));
        myChart.setOption(op1);
      },
      drawAnnualPie(){
        let option = {
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient : 'vertical',
            x : 'left',
            data:['类型一','类型二','类型三']
          },
          toolbox: {
            show : true,
            feature : {
              mark : {show: true},
              dataView : {show: true, readOnly: false},
              magicType : {
                show: true,
                type: ['pie', 'funnel'],
                option: {
                  funnel: {
                    x: '25%',
                    width: '50%',
                    funnelAlign: 'left',
                    max: 1548
                  }
                }
              },
              restore : {show: true},
              saveAsImage : {show: true}
            }
          },
          calculable : true,
          series : [
            {
              name:'访问来源',
              type:'pie',
              radius : '55%',
              center: ['50%', '60%'],
              data:[
                {value:335, name:'类型一'},
                {value:310, name:'类型二'},
                {value:234, name:'类型三'},
              ]
            }
          ],
        };
        let myChart = this.$echarts.init(document.getElementById('AnnualPie'));
        myChart.setOption(option);
      },
    }

  }
</script>

<style scoped>
  @import "../../assets/css/table.css";
</style>
